<template>
  <div class="tg">
    <div class="f1">
      <router-link to="/">
        <img
          src="https://image.hongbeibang.com/FoTuxKG5pqYKuAsT8BjrflkAxEpj?48X48&imageView2/1/w/48/h/48"
          alt=""
        />
      </router-link>
      <p @click="guize()">规则</p>
    </div>
    <div class="f2">
      <div>
        <img src="img/tx/tx.jpg" alt="" />
      </div>
      <div>
        <h3>
          您已连续签到 <span>{{ count }}</span> 天
        </h3>
        <p>超过了 <span>0.00%</span> 的帮友</p>
      </div>
      <div>
        <button @click="show()" :class="{ active: isActive }">签到</button>
        <button @click="isActive = true" :class="{ active1: isActive1 }">
          已签到
        </button>
      </div>
    </div>
    <div class="f3">
      <div>
        <img
          class="xuanzhuan"
          :style="`transform: rotate(${num}deg);transition:${time}s;`"
          src="https://image.hongbeibang.com/FlijP6iuVJ9gjxSWsdOcklE9TYmr?750X750&imageView2/1/w/500/h/500"
          alt=""
        />
        <div class="f3-one">
          <button @click="rotate">启动</button>
          <img
            src="	https://image.hongbeibang.com/Fu8-YogyVjFs9YIg-BjXQbvLQatT?750X750&imageView2/1/w/500/h/500"
            alt=""
          />
        </div>
      </div>
      <div>
        <button @click="rotate">15帮贡 / 次</button>
        <p>今日还有 <span>N</span> 次机会</p>
      </div>
    </div>
    <div class="f4">
      <span>__________</span>
      <p>今日大奖花落谁家</p>
      <span>__________</span>
    </div>
    <div class="f5">
      <div
        class="f5-one"
        v-for="{ clientImage, clientName, point, clientId } in bution"
        :key="clientId"
      >
        <img :src="clientImage" alt="" />
        <div>
          <span>{{ clientName }}</span>
          <span>获得{{ point }}帮贡</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.contribution();
  },
  data() {
    return {
      count: 0,
      bution: {},
      arr: [],
      num: 0,
      time: 3,
      isActive: false,
      isActive1: true,
    };
  },
  methods: {
    show() {
      this.count += 1;
      this.isActive = !this.isActive;
      this.isActive1 = !this.isActive1;
    },
    // 封装switch语法
    diao(test) {
      this.$dialog.alert({ message: test }).then((res) => {
        if (res == "confirm") {
          this.num = 0;
          this.time = 0;
        }
      });
    },
    // 贡献榜
    contribution() {
      this.axios
        .get(
          "https://api.hongbeibang.com/sign/getTodayTopTaskClient?_t=1666876250697&timestamp=1666876250697"
        )
        .then((res) => {
          this.bution = res.data.data;
        });
    },
    // 转盘
    rotate() {
      this.time = 3;
      //给数组循环设置一组值
      for (let i = 720; i <= 1080; i += 40) {
        this.arr.push(i);
      }
      //生成一个随机数做数组的下标
      let i = Math.floor(Math.random() * this.arr.length);
      //将随机数赋值给动画里的to的rotate,得到角度
      this.num = this.arr[i];
      console.log("打印:", this.arr[i]);
      setTimeout(() => {
        switch (this.arr[i]) {
          case 720:
            this.diao("恭喜您获得 [ 头等奖 ] +5000");
            break;
          case 760:
            this.diao("您的手气不太好! + [ 好可惜啊 ]");
            break;
          case 800:
            this.diao("恭喜您获得 [ 关注2次 ] +20");
            break;
          case 840:
            this.diao("恭喜您获得 [ 二等奖 ] +1000");
            break;
          case 880:
            this.diao("恭喜您获得 [分享2次] +30");
            break;
          case 920:
            this.diao("恭喜您获得 [点赞10次] +25");
            break;
          case 960:
            this.diao("恭喜您获得 [三等奖] +88");
            break;
          case 1000:
            this.diao("恭喜您获得 [传作品1次] +50");
            break;
          case 1040:
            this.diao("恭喜您获得 [打赏5次] +25");
            break;
          case 1080:
            this.diao("恭喜您获得 [头等奖] +5000");
            break;
        }
      }, 3000);
    },
    // 跳转到规则页面
    guize() {
      this.$router.push("/qiandao/guize");
    },
  },
};
</script>

<style scoped>
.active {
  display: block;
}
.active1 {
  display: none;
}
.tg {
  width: 90vw;
  margin: 0 auto;
}
/* 返回和规则 */
.f1 {
  display: flex;
  justify-content: space-between;
  margin-top: 2vh;
}
.f1 > a > img {
  width: 8vw;
}
.f1 > p {
  font-size: 18px;
}
/* 点击签到 */
.f2 {
  display: flex;
  margin-top: 3vh;
}
.f2 > div:first-child {
  width: 12vw;
  height: 8vh;
}
.f2 > div:first-child > img {
  border-radius: 50%;
  width: 100%;
}
.f2 > div:nth-child(2) > h3 {
  margin-bottom: 1vh;
  color: #333;
  margin-left: 5vw;
}
.f2 > div:nth-child(2) span {
  color: red;
}
.f2 > div:nth-child(2) > p {
  font-size: 12px;
  color: #999;
  margin-left: 5vw;
}
.f2 > div:last-child > button:first-child {
  position: absolute;
  top: 10vh;
  right: 6vw;
  font-size: 16px;
  width: 20vw;
  height: 6vh;
  color: white;
  margin-left: 17vw;
  border-radius: 6vh;
  border: 0;
  background-color: #ff8a6d;
  line-height: 6vh;
}
.f2 > div:last-child > button:last-child {
  position: absolute;
  top: 10vh;
  right: 6vw;
  font-size: 16px;
  width: 20vw;
  height: 6vh;
  color: white;
  margin-left: 17vw;
  border-radius: 6vh;
  border: 0;
  background-color: #b6b6b6;
  line-height: 6vh;
}
/* 转盘 */
.f3 {
  width: 90vw;
  height: 55vh;
  position: relative;
}

.f3 > div {
  width: 90vw;
  height: 50vh;
  position: relative;
  transition: 1.1;
}
.f3 > div > img {
  width: 100%;
}

.f3 > div > .xuanzhuan {
  transform: rotate(0deg);
}
.f3 > div .f3-one {
  position: absolute;
  top: 0%;
  left: 0%;
}
.f3-one > button {
  position: absolute;
  top: 22vh;
  left: 38vw;
  border: 0;
  padding: 3vw;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  background-color: #f16542;
}
.f3 > div .f3-one > img {
  width: 90vw;
}
.f3 > div:last-child > button {
  font-weight: bold;
  color: #fff;
  font-size: 16px;
  text-align: center;
  position: absolute;
  top: 0%;
  left: 27%;
  width: 40vw;
  height: 6vh;
  border-radius: 6vh;
  border: 0;
  background-color: #ff8a6d;
}
.f3 > div:last-child p {
  position: absolute;
  top: 12%;
  left: 32%;
}
.f3 > div:last-child span {
  color: red;
}
/* 大奖花落谁家 */
.f4 {
  margin-top: 8vh;
  display: flex;
  justify-content: center;
}
.f4 > p {
  font-size: 16px;
  font-weight: bold;
  margin: 2px 3vw 0 3vw;
}
.f5 {
  width: 90vw;
  height: 4vh;
  margin: 0 auto;
}
.f5-one {
  margin-top: 3vh;
  width: 80vw;
  height: 4vh;
  display: flex;
}
.f5-one > img {
  margin-left: 4vw;
  width: 10%;
  border-radius: 50%;
}
.f5-one div {
  display: flex;
  flex: 1;
  justify-content: space-between;
}
.f5-one div > span {
  margin-top: 1vh;
}
.f5-one div > span:first-child {
  padding-left: 4vw;
}
.f5-one div > span:last-child {
  padding-left: 4vw;
}
.f5-one:last-child {
  margin-bottom: 4vh;
}
</style>